<script setup lang="ts">
import { useGameStore } from '@/stores/modules/game'
import { getStringKeys } from '@/utils/tools'
import {
  TECHNIQUES_MAP,
  RECIPE_CONDIMENT_MAP,
  GOLD_RUNE,
  SILVER_RUNE,
  BRONZE_RUNE,
} from '@/stores/mappings'

import type { IRecipe } from '@/stores/types'

const props = defineProps<{
  id: number
}>()

const recipe = useGameStore().recipesMap.get(props.id)

function formatTime(time: number): string {
  if (time < 0) time = 0
  const minutes = Math.floor(time / 60)
  const seconds = time % 60
  const pad = (n: number) => n.toString().padStart(2, '0')
  return `${pad(minutes)}分${pad(seconds)}秒`
}

function formatTechniques(recipe: IRecipe): string {
  let result = ''
  const keys = getStringKeys(TECHNIQUES_MAP)
  keys.forEach((key) => {
    if (recipe[key] > 0) {
      result += `${TECHNIQUES_MAP[key]} ${recipe[key]} `
    }
  })
  return result
}

function formatCondiment(recipe: IRecipe): string {
  let result = ''
  const keys = getStringKeys(RECIPE_CONDIMENT_MAP)
  const condiment = keys.find((f) => f === recipe['condiment'])
  if (condiment) {
    result = RECIPE_CONDIMENT_MAP[condiment]
  }
  return result
}

function formatMaterials(recipe: IRecipe): string {
  let result = ''
  const materialsMap = useGameStore().materialsMap
  recipe.materials.forEach((f) => {
    const material = materialsMap.get(f.material)
    if (material) {
      result += `${material.name}*${f.quantity} `
    }
  })
  return result
}

function formatGift(recipe: IRecipe): string {
  let result = ''
  const [gold, silver, bronze] = [GOLD_RUNE, SILVER_RUNE, BRONZE_RUNE]
  const { gift } = recipe
  if (gold.some((s) => gift.includes(s))) {
    result = '金'
  } else if (silver.some((s) => gift.includes(s))) {
    result = '银'
  } else if (bronze.some((s) => gift.includes(s))) {
    result = '铜'
  }
  return result
}
</script>

<template>
  <n-popover trigger="hover" :keep-alive-on-hover="false">
    <template #trigger>
      <slot></slot>
    </template>
    <n-grid v-if="recipe" :cols="2" :x-gap="4" :y-gap="4">
      <n-gi class="gi">
        <span class="label">售价</span>
        <span class="text">{{ recipe.price + recipe.exPrice }}</span>
        <span class="text-warning"> (+{{ recipe.exPrice }})</span>
      </n-gi>
      <n-gi class="gi">
        <span class="label">时间</span>
        <span class="text">{{ formatTime(recipe.time) }}</span>
      </n-gi>
      <n-gi class="gi">
        <span class="label">技法</span>
        <span class="text">{{ formatTechniques(recipe) }}</span>
      </n-gi>
      <n-gi class="gi">
        <span class="label">调料</span>
        <span class="text">{{ formatCondiment(recipe) }}</span>
      </n-gi>
      <n-gi class="gi" :span="2">
        <span class="label">食材</span>
        <span class="text">{{ formatMaterials(recipe) }}</span>
      </n-gi>
      <n-gi v-if="recipe.gift !== '-'" class="gi" :span="2">
        <span class="label">符文</span>
        <span class="text">{{ recipe.gift }}</span>
        <span class="text-warning"> ({{ formatGift(recipe) }})</span>
      </n-gi>
    </n-grid>
    <n-empty v-else description="空空如也~" class="px-[48px]"></n-empty>
  </n-popover>
</template>

<style lang="scss" scoped>
.gi {
  background-color: rgb(#b99274, 0.4);
  padding: 2px 8px;
  .label {
    color: #88563e;
    font-weight: bold;
    margin-right: 12px;
  }
  .text {
    font-weight: bold;
  }
  .text-warning {
    color: #b3310e;
  }
}
</style>
